<template>
  <div>
 
    个人信息页面
  </div>
</template>

<script setup>
import {ElMessage, ElMessageBox} from "element-plus";
import {onMounted, reactive, ref} from "vue";
import ImgsUpload from "@/components/img/imgsUpload/index.vue"
import ImgsShow from "@/components/img/imgShow/index.vue"
import {
  getUserPage,
  updateUser,
  deletedUser,
  addUser,
  getUserById
} from "@/api/user";
import {useUserStore} from "@/stores/userStores";
import {getDepartList} from "@/api/depart";
const tableData = reactive({
  records: [],
  orderBy: '',
  pages: 0,
  page: 1,
  size: 10,
  query: {}
});
const form = ref({
  id: '', //用户id
  depId: '', //部门id
  userName: '', //用户名
  password: '', //密码
  phone: '', //电话
  role: '', //角色id
  departRole: '', //部门角色（经理、普通员工）
  createTime: '', //创建时间
});
//------------选择框------------------------
const options = [
  {
    value: 'Option1',
    label: 'Option1',
  },
  {
    value: 'Option2',
    label: 'Option2',
    disabled: true,
  },

];

//------------基本常量------------------------
const userStore = useUserStore();
const token = userStore.token;
const detailDialog = ref(false);
const editDialog = ref(false);
const addDialog = ref(false);

// --------图片相关----------
const imgList = ref([])
const changeImgList = (array) => {
  imgList.value = array;
  form.value.pictures = JSON.stringify(array);
}

const dealImgJson = () => {
  // 图片处理
  console.log("拿到的图片值", form.value.pictures)
  if ('' != form.value.pictures && null != form.value.pictures) {
    imgList.value = JSON.parse(form.value.pictures.replace(/[\\]/g, ''));
  }
}

// ------------------- 搜索操作 ------------------------

const allList = ref([]);
const loadAllList =async () =>{
const res = await getDepartList();
allList.value = res.data

}

const searchData = ref({
  //用户id
  id: {
    key: 'id',
    sqlKeyword: 'EQ',
    value: ''
  },
  //部门id
  depId: {
    key: 'depId',
    sqlKeyword: 'EQ',
    value: ''
  },
  //用户名
  userName: {
    key: 'user_name',
    sqlKeyword: 'LIKE',
    value: ''
  },
  //密码
  password: {
    key: 'password',
    sqlKeyword: 'EQ',
    value: ''
  },
  //电话
  phone: {
    key: 'phone',
    sqlKeyword: 'LIKE',
    value: ''
  },
  //角色id
  role: {
    key: 'role',
    sqlKeyword: 'EQ',
    value: ''
  },
  //部门角色（经理、普通员工）
  departRole: {
    key: 'depart_role',
    sqlKeyword: 'EQ',
    value: ''
  },
  //创建时间
  createTime: {
    key: 'createTime',
    sqlKeyword: 'EQ',
    value: ''
  },

});

function clearnSearch() {
  searchData.value.id.value = '';
  searchData.value.depId.value = '';
  searchData.value.userName.value = '';
  searchData.value.password.value = '';
  searchData.value.phone.value = '';
  searchData.value.role.value = '';
  searchData.value.departRole.value = '';
  searchData.value.createTime.value = '';
  loadData();

}


/**
 * 查看详情
 * */
const openDetail = async (id) => {
  const res = await getUserById(id);
  form.value = res.data;
  // 图片处理
  dealImgJson();
  detailDialog.value = true;
}

/**
 * 打开编辑按钮
 */
const openEdit = async (id) => {
  const res = await getUserById(id);
  form.value = res.data;
  // 图片处理
  dealImgJson();
  editDialog.value = true;
};

/**
 *修改
 */
const edit = async () => {
  const res = await updateUser(form.value);
  ElMessage.success("修改成功");
  editDialog.value = false;
  loadData();
  resetForm();
};

/**
 *添加
 */
const add = async () => {
  const res = await addUser(form.value);
  ElMessage.success("添加成功");
  addDialog.value = false;
  loadData();
  resetForm();
};

/**
 * 删除数据
 */
const deleted = async (id) => {
  ElMessageBox.confirm("是否确认删除？", "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  }).then(async () => {
    const res = await deletedUser({id});
    ElMessage.success("success");
    loadData();
  });
};

/**
 * 重置表单
 */
const resetForm = () => {
  if (addDialog.value) {
    addDialog.value = false;
  }
  if (editDialog.value) {
    editDialog.value = false;
  }
  if (detailDialog.value) {
    detailDialog.value = false;
  }
  form.value = {};
  // 图片处理
  imgList.value = [];
};

const loadData = async () => {
  tableData.query = searchData.value;
  const res = await getUserPage(tableData);
  tableData.records = res.data.list;
  tableData.page = res.data.page;
  tableData.pages = res.data.pages;
  loadAllList();
};
onMounted(() => {
  // 初始加载分页数据
  loadData(tableData);
});
</script>

<style scoped>

.search-line {
  display: flex;
  margin-bottom: 10px;
  text-align: center;
  line-height: 35px;
}

</style>

